﻿$form-border-color: #eee;
$field-height: 20px;
$field-hpadding: 10px;
$field-vpadding: 5px;
$field-margin: 0px;
$field-width: 500px;
$field-label-width: 150px;
$field-size: $field-height + $field-vpadding * 2;
$field-container-width: $field-width - $field-label-width - 10;

@mixin get-height($size, $offset: 0px) {
	@if $size == 1 {
		height: $field-height - $offset;
	}
	@else {
		height: (($field-height + ($field-vpadding * 2)) * $size) + $field-margin * ($size - 1) - $field-vpadding * 2 - $offset;
	}
}

@mixin inline-block {
	display: -moz-inline-box;
	display: inline-block;
}

@mixin border-radius($size: 3px) {
	-moz-border-radius: $size;
	border-radius: $size;
}

@mixin opacity($value: 1) {
	opacity: $value;
	filter: 'alpha(opacity=' + ($value * 100) + ')';
}

html, body, div, p, select, input, td, th { font-size: 8pt; font-family: arial; }

.form {
	border: 1px solid $form-border-color;
	border-top: none;

	input.form-button {
		background: #ea9d3a;
		color: white;
		border: none;
		font-size: 1em;
		padding: 3px 10px;
		margin: 0px;
		font-weight: bold;
		@include border-radius;
	}

	input.form-button.disabled {
		background: gray;
	}

	.form-header {
		border-top: 1px solid $form-border-color;
		border-bottom: 1px solid $form-border-color;
		background: white url(../images/form-header.png) 1px 1px no-repeat;
		font-size: 1.5em;
		font-weight: bold;
		padding: 5px 10px;	
		color: black;
		clear: both;
	}

	.form-field {
		padding: $field-vpadding $field-hpadding;
		width: $field-width;
		float: left;

		@include get-height(1);

		&.h2x { @include get-height(2); }
		&.h3x { @include get-height(3); }
		&.h4x { @include get-height(4); }
		&.h5x { @include get-height(5); }
		&.h6x { @include get-height(6); }

		.form-field-label {
			float: left;
			width: $field-label-width;
			line-height: $field-height;
		}

		input, select, textarea {
			margin: 0px;
		}

		.form-field-container {
			height: 100%;
			
			line-height: $field-height;
			overflow: hidden;

			&.solid-border {
				border: 1px solid #ddd;
			}
		}

		.form-dropdown, .form-list {
			width: 100%;
		}

		.form-text {
			width: 100%;
			height: 100%;
			padding: 0px;
			margin: 0px;
			border: 0px;
		}

		input.form-button {
			padding: 1px 5px;
			background: #295173;
		}
	}
	
	.form-field-right {
		.form-field-container {
			text-align: right;
		}
	}

	.form-section {
		clear: both;
		margin-left: $field-margin;
		padding-bottom: 3px;
		
		width: ($field-width + $field-hpadding * 2 + $field-margin * 2) * 2;
	}

	.form-command {
		clear: both;
		padding: 10px;
		border-top: 1px solid $form-border-color;
		padding-left: 160px;

		.form-button {
			margin-right: 20px;
		}
	}

	.form-grid {
		

		thead {
			td, th {
				font-weight: bold;
			}
		}
	}

	.form-summary {
		display: none;
		padding: 10px;

		li {
			color: red;
			font-weight: bold;
		}
	}

	.form-summary.validation-summary-errors {
		display: block;
	}
}

.input-validation-error { color: red; }

.ui-loading-indicator {
	background: white url(../images/ajax-loader.gif) center center no-repeat;
	@include opacity(0.8);
}